<script>
  /*
   * @Author: wzh 
   * @Date: 2021-06-01 20:00:00
   * @Last Modified by: 1521620993@qq.com
   * @Last Modified time: 2021-06-01 20:00:00
   */
</script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-不用JS实现普通轮播图</title>
</head>
<body>
  <style>
    :root {
      --width: 20rem;
      --height: 10rem;
    }
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    body {
      display: flex;
      justify-content: center;
      height: 100vh;
      align-items: center;
    }
    div.slide {
      width: var(--width);
      height: var(--height);
      border: .2rem dashed purple;
      overflow: hidden;

      /* 给input做定位参考 */
      position: relative;
    }
    ul.list {
      width: calc(var(--width) * 4);
      height: inherit;
      /* border: .5rem dashed blue; */
      position: relative;
      z-index: -1;
      animation: move 5s ease 1s infinite;
    }
    @keyframes move {
      0% {
        transform: translate(calc( 0 * var(--width)));
      }
      33% {
        transform: translate(calc( -1 * var(--width)));
      }
      66% {
        transform: translate(calc( -2 * var(--width)));
      }
      100% {
        transform: translate(calc( -3 * var(--width)));
      }
    }
    li.item {
      width: var(--width);
      height: inherit;
      box-sizing: border-box;
      border: .2rem solid pink;
      background-color: wheat;
      color: #fff;
      font-size: 4rem;
      text-align: center;
      line-height: var(--height);
      float: left;
    }
    input {
      display: none;
    }
    .labels {
      position: absolute;
      bottom: .5rem;
      /* 注意层级 */
      z-index: 1;
      width: inherit;
      /* background-color: red; */
      justify-content: center;
      display: none;
    }
    .slide:hover .labels {
      display: flex;
    }
    .slide:hover {
      cursor: pointer;
    }
    .labels label {
      width: .5rem;
      height: .5rem;
      border-radius: 50%;
      margin: 0 .3rem;
      border: .1rem solid #fff;
      background-color: transparent;
      box-sizing: border-box;
      cursor: pointer;
    }
    input[id=pic1]:checked ~ .labels label[for=pic1],
    input[id=pic2]:checked ~ .labels label[for=pic2],
    input[id=pic3]:checked ~ .labels label[for=pic3] {
      background-color: #fff;
      border: .1rem solid #fff;
    }
    input[id=pic1]:checked ~ ul.list {
      transform: translate(calc( 0 * var(--width)));
    }
    input[id=pic2]:checked ~ ul.list {
      transform: translate(calc( -1 * var(--width)));
    }
    input[id=pic3]:checked ~ ul.list {
      transform: translate(calc( -2 * var(--width)));
    }
    .slide:hover .list {
      animation-play-state: paused;
      animation: none;
    }
  </style>
  <div class="slide">
    <!-- 新增 -->
    <input type="radio" name='pic' id='pic1' checked>
    <input type="radio" name='pic' id='pic2'>
    <input type="radio" name='pic' id='pic3'>
    <div class="labels">
      <label for="pic1"></label>
      <label for="pic2"></label>
      <label for="pic3"></label>
    </div>
    <ul class="list">
      <li class="item">
        1
      </li>
      <li class="item">
        2
      </li>
      <li class="item">
        3
      </li>
      <li class="item">
        1
      </li>
    </ul>
  </div>
</body>
</html>